Avant-propos

http://bit.ly/jmb-apsio

Désolé…​

  • …​pour l’anglais (really?)

  • …​ de ne pas être un spécialiste d’Android

  • …​ que vous soyez la 1ère promo à subir ce cours

  • …​que ce cours arrive avant que vous sachiez développer en Android/Mobile

  • …​ que vous ayiez à bosser sans ordi ce matin! (au moins 1h30!)

1. Content

  • Brainstorming & organization

  • Brainstorming & organization

  • Internet search & site web building

  • UML & Modeling for Mobile Applications

  • Case study

2. Organisation prévue

Module de 21h :

  • 4 créneaux semaine 41

    • [1] Intro & Brainstorming

    • [2] Travail de groupe

    • [3] Première maquette du site Web

    • [4] UML rappel et concepts importants

  • 10 créneaux semaine 42

    • [5] Gestion de projet spécifique, UML

    • [6] Mise en oeuvre sur une étude de cas

    • [7-8] Reverse ingéniérie d’une application Android

    • [9-13] Modélisation : projet perso (binôme)

    • [14] Présentation publique de votre appli perso (binôme)

    • [14] QCM exam final

3. Let’s start Brainstorming

whiteboard
Figure 1. Résultat 2015/2016
background
Figure 2. Background 2015/2016

4. Wrap-up

Par petits groupes :

  • [1] Préparation du site web

  • [2] Liste des concepts UML connus et utiles

  • [3] Outils et langages de description d’écrans

  • [4] Plateformes de développement Android

  • [5] Différences iOS /Android

  • […​] Résultats du brainstorm

Les numéros ne représentent pas un ordre d’importance!

4.1. Plans B …​

  • Spécificités des applications mobiles

  • Modélisation des interfaces

  • Modélisation de l’architecture

  • Modélisation du comportement

  • Agilité et applications mobiles

4.2. [1] Site web des fiches

Je fait parti de ce groupe!

4.3. [2] Concepts UML connus

  • 1. Recensement des concepts connus

    • diagrammes

    • concepts dans ces diagrammes

    • méthodes (RUP, OpenUP, Agile)

    • ⇒ Google Sheet ?

  • 2. Pour le Mobile Modeling

    • brainstorming

4.4. [3] Outils et langages de description d’écrans

  • Type SNI (Schéma de Navigation des Interfaces)

  • Dessin / Générationd de code

  • Focus sur les Open Sources of course

4.5. [4] Plateformes de développement Android

  • Avis objectifs (chiffrés)

  • Aspects historiques

  • Focus sur les Open Sources of course

4.6. [5] Différences /

  • Niveau modélisation

  • Concepts

  • Cycle de développement

4.7. Consignes

Pour chaque groupe (sauf [1]) :

  • Exprimer le problème

  • Rechercher les solutions existantes

  • Brainstormer sur la meilleure solution

  • La formaliser un minimum

  • Remplir un poster de la forme Fiche

  • Merger sa branche

4.8. Fiche

  • Titre

    • Motivations & problems (shortly)

    • Current approaches

    • Proposed approach

    • Example

4.9. Résultats

En 2015/2016 nous avons eu deux équipes chargées du site web :

5. Exemple complet de démarche "ad hoc" autour d’UML

Nous allons aborder une étude de cas tirée du livre de Pascal Roques.

prfc

Pour un apperçu du livre, cf. http://www.editions-eyrolles.com/Chapitres/9782212110708/chap01.pdf.

5.1. Le cahier des charges

Il s’agit de développer un service de vente en ligne (http://jeBouquine.com).

Depuis l’écriture du livre un vrai site de vente utilise cette URL!

5.2. Des besoins au code

(c) Pascal Roques
Figure 3. Le gap à combler (image tirée de [Roques2007a])

5.3. Raffinement des besoins

(c) Pascal Roques
Figure 4. Raffinement des besoins (image tirée de [Roques2007a])

5.4. Près du code

(c) Pascal Roques
Figure 5. Près du code (image tirée de [Roques2007a])

5.5. Comment trouver les classes ?

(c) Pascal Roques
Figure 6. Comment trouver les classes ? (image tirée de [Roques2007a])

5.6. Comment trouver les interactions ?

(c) Pascal Roques
Figure 7. Comment trouver les interactions ? (image tirée de [Roques2007a])

5.7. Liens entre diagrammes

(c) Pascal Roques
Figure 8. Liens entre diagrammes (image tirée de [Roques2007a])

5.8. Démarche complète

(c) Pascal Roques
Figure 9. Démarche complète (image tirée de [Roques2007a])

6. Diagrammatic models

6.1. UML Use Case Diagram

Exemple de Diagramme d'UC
Figure 10. Exemple de Diagramme d’UC

6.2. SysML Requirements Diagram

Exemple de Diagramme d'Exigence SysML
Figure 11. Exemple de Diagramme d’Exigence SysML

6.3. Sketch and drawings (Maquettes)

Dessin complexe
Figure 12. Un exemple de "mockup" réalisé avec l’outil balsamiq
L’IUT de Blagnac a une licence éducation qui vous permet d’utiliser gratuitement Balsamiq : https://iutblagnac.mybalsamiq.com.

6.4. UML Class Diagram

Exemple de Diagramme de classe
Figure 13. Exemple de Diagramme de classe

6.5. SNI: Schéma de Navigation d’Interface

Exemple de SNI
Figure 14. Exemple de SNI
Il existe un plug-in Eclipse pour SNI: VisualSNI
Lien UC / SNI
Figure 15. Lien UC / SNI

6.6. UML Sequence Diagram

Diagramme de Séquence
Figure 16. Un Diagramme de Séquence

6.7. UML Component Diagram

Diagramme de Composant
Figure 17. Un Diagramme de Composant
Source: http://www.uml-diagrams.org/deployment-diagrams.html

6.8. SysML Block Definition Diagram

Exemple de Diagramme de BDD SysML
Figure 18. Exemple de Diagramme de BDD SysML

6.9. UML deployment diagram

Deployement
Figure 19. Example of application deployment to Android (see [uml-diagrams])
Source: http://www.uml-diagrams.org/deployment-diagrams.html

6.10. SysML Internal Block Definition Diagram

Exemple de Diagramme d'IBD SysML
Figure 20. Exemple de Diagramme d’IBD SysML

7. Process examples

7.1. One example

  • 1) Identify the app users

  • 2) Identify the main functionalities

  • 3) Analyzing and expanding each functionality

Source: http://www.javacodegeeks.com/2013/07/android-uml-design-an-app-part-1.html

7.2. Agile for Mobile Application Development

7.2.1. Example 1

Some restrictions with mobile application development are:

  • Mobile has restrictions: size of the apps, …​

  • Application should be downloadable very fast

  • Update applications quickly and smoothly

  • Error free and fast

  • Seamlessly interact with backend server as needed

Taken from http://www.infoq.com/news/2014/10/agile-mobile-application

7.2.2. Example 2

Challenges presented by developing mobile apps:

  • Short life cycles

  • Short development cycles

  • Limited hardware

  • Frequently changing user demands

  • Must be easily updateable

  • Must download quickly

See: http://sourcebits.com/app-development-design-blog/what-is-agile-development-for-mobile-apps/

7.2.3. Example 3

An “Agile with Discipline” approach for mobile app development

agile with discipline model
Figure 21. IBM approach for mobile app development (see [IBM])
Taken from [IBM]

7.2.4. Example 4

Multi-target User Interface design & Generation using MDE

  1. (see [Veldhuis2013]) image::Veldhuis.png[width="100%"]

Taken from [Veldhuis2013]

8. Reverse Engineering tools

androidMM

9. Etude de cas: VoisMaBalade

9.1. Cahier des charges

La société VoisMaBalade propose à tout un chacun de présenter ses activités sportives dans le domaine de la montagne. Son concept repose sur un site Web permettant de présenter les diverses pratiques sportives (randonnées, sorties en ski de randonnée, sorties en VTT et escalade) de ses utilisateurs, ces pratiques étant recueillies via une application mobile.

L’application à développer devra fonctionner sur des mobiles et tablettes Android . Pour chacune de ses activités, l’utilisateur pourra créer une activité, enregistrer son tracé (le cas échéant) ou la renseigner, la consulter ou la supprimer. Il conviendra d’utiliser le GPS de l’appareil mobile afin d’enregistrer une trace, de positionner la trace sur une carte de type Google Maps (fourni par un Web service). Les données seront d’abord sauvegardées en local, puis sur un serveur dédié.

Une activité est attachée à un parcours pour la randonnée, le ski de randonnées et le VTT et à une voie pour l’escalade. Un parcours est caractérisé par un point de départ, un point d’arrivée, un dénivelé positif et négatif, et son tracé. Une randonnée est caractérisée par son temps de parcours, une sortie de ski de randonnées par son engagement (de 1 à 4) et une sortie de VTT par sa distance en kilomètres. Une voie est caractérisée par sa cotation (de 4 à 9, chaque niveau étant sous-coté de A à C – par exemple une voie est cotée 6A) et sa géolocalisation (un point GPS).

Afin de permettre aux professionnels de la montagne d’utiliser cette application, il sera possible d’accéder à un profil d’utilisateur particulier représentant une entreprise. Dans ce cas, il lui sera possible de promouvoir ses activités moyennant finances, en établissant un contrat pour chaque activité qu’il souhaite promouvoir. Ce contrat définira les dates de début et de fin de promotion ainsi que le montant du contrat. Les données de l’utilisateur sont son pseudo, son nom, son prénom et son adresse mail.

À part le pseudo qui reste public, il peut choisir si chacune de ses données est publique ou non. Un utilisateur professionnel aura pour données un nom d’entreprise, son adresse postale, son adresse mail, son site web et un numéro de téléphone. Pour les deux profils, on disposera d’une photo toujours publique. Concernant la consultation, il faudra pouvoir effecteur une recherche selon un critère défini. Les activités seront accessibles selon une organisation géographique en zones et sous-zones couvrant des zones géographiques de plus en plus restrictives jusqu’au lieu de l’activité. Chaque zone est caractérisée par les coordonnées des 4 points formant la tuile rectangulaire la couvrant.

9.2. Questions

  1. Donnez le diagramme des cas d’utilisation de cette application.

    uc
    Figure 22. Une correction possible

  2. Donnez le diagramme de domaine de cette application.

    dc1
    Figure 23. Une correction possible
    dc2

  3. Quel type de diagramme utiliser pour représenter un écran de votre application?

    Un écran est composé d’éléments structurels. Il convient donc de le représenter avec un diagramme de classe. Les enchainements d’écrans peuvent être décrits comme des comportements. On pourra utiliser un d’état-transition.

  4. Quel type de diagramme utiliser pour représenter un enchainement d’écrans ? Réalisez un diagramme de votre choix pour représenter les écrans principaux de votre application et leur enchaînement.

    Les enchainements d’écrans peuvent être décrits comme des comportements. On peut utiliser :

enchainement
Figure 24. Une correction possible

9.3. Tools

balsamiq
Figure 25. Maquettes en Balsamiq
Enchaînement en graphViz
Figure 26. Enchaînement en graphViz

9.4. Expected outputs

  • Rapport au format .pdf

  • démo au format de votre choix (PPT/PDF, Vidéo)

  • .zip avec figures, modèles .uml, code, etc.

References and useful links

References

  • [gram86] Ana Gram. Raisonner pour programmer. Dunod, 1986.

  • [HighsmithFowler2001] Jim Highsmith and Martin Fowler. The agile manifesto. Software Development Magazine, 9(8) :29–30, 2001.

  • [1030005] Kieran Conboy and Brian Fitzgerald. Toward a conceptual framework of agile methods : a study of agility in different disciplines. In WISER ’04 : Proceedings of the 2004 ACM workshop on Interdisciplinary software engineering research, pages 37–44, New York, NY, USA, 2004. ACM.

  • [Roques2007a] Les Cahiers du Programmeur, UML2, Pascal Roques 3ème Edition, Eyrolles, 2007.

  • [Roques2007b] UML 2 par la pratique, Pascal Roques 6ème Edition, Eyrolles, 2007.

  • [Blanc2006] UML pour les développeurs, Xavier Blanc, Eyrolles, 2006.

  • [Longepe2006] Le projet d’urbanisation du S.I., C. Longépé, 3ème édition, Dunod, 2006.

  • [Gillet2008] Management des SI, M. & P. Gillet, Dunod, 2008.

  • [Muller] Modélisation objet avec UML. {pam} & Nathalie Gaetner, Eyrolles, 2003.

  • [RUP] http://fr.wikipedia.org/wiki/Unified_Process

Links

Glossary

Ressources

The following definitions are only informative. You can find usefull other sources here:
DRY

Don’t Repeat Yourself :

IHM

Interface Homme-Machine

MCF

Modèle Conceptuel des Flux

MCT

Modèle Conceptuel des Traitements

MOA/MOE

Maîtrise d’ouvrage (MOA) Maîtrise d’oeuvre (MOE)

MOF

Modèle Organisationnel des Flux

MOT

Modèle Organisationnel des Traitements

OMG

Object Management Group

PPN

Programme Pédagogique National

SEF

Schéma d'Enchaînement des Fenêtres

SEP

Schéma d'Enchaînement des Pages

SI

Système d'Information

SNI

Schéma de Navigation d'Interfaces

SO

Système Organisationnel

SysML

System Modeling Language ™

TRL

Technology Readiness Level

URL

Universal Ressource Locator

About…​

Document generated by Jean-Michel Bruel — bruel@irit.fr via Asciidoctor (version 1.5.2) from Dan Allen. This document is free to use under 'Licence Creative Commons' licence. Licence Creative Commons